<template>
  <div class="payment-info">
<!--    <h2 style="font-size: 25px">请尽快支付订单,剩余时间<van-count-down style="color:red;font-size: 30px" :time="time" class="van-cards"/></h2>-->

    <van-steps :active="active" @click-step="handleStepClick">
      <van-step title="技师接单" icon="check" status="finish" />
      <van-tag type="success" v-if="active === 0">技师接单</van-tag>
      <van-step title="技师出发" icon="location" status="process" />
      <van-tag type="success" v-if="active === 1">技师出发</van-tag>
      <van-step title="技师到达" icon="location" status="wait" />
      <van-tag type="success" v-if="active === 2">技师到达</van-tag>
      <van-step title="开始服务" icon="play" status="wait" />
      <van-tag type="success" v-if="active === 3">开始服务</van-tag>
      <van-step title="服务完成" icon="check" status="wait" />
      <van-tag type="success" v-if="active === 4">服务完成</van-tag>
    </van-steps>
    <img v-if="active === 0" src="https://pro-wjy.oss-cn-beijing.aliyuncs.com/2024/10/31/017566db027349a9845bc114d0d2a1d8.png" alt="技师接单" class="step-image" />
    <img v-if="active === 1" src="https://pro-wjy.oss-cn-beijing.aliyuncs.com/2024/12/10/517470981b9a437ca69ae75bd340df6dlazy%7E%E5%92%A9%E5%92%A9%20.jpg" alt="技师出发" class="step-image" />
    <img v-if="active === 2" src="https://pro-wjy.oss-cn-beijing.aliyuncs.com/2024/10/31/11896f1119d943e8879b2bc9f1e8792c.jpg" alt="技师到达" class="step-image" />
    <img v-if="active === 3" src="https://pro-wjy.oss-cn-beijing.aliyuncs.com/2024/10/31/483dddbc5c9542a1968095efba8eb86f.png" alt="开始服务" class="step-image" />
    <img v-if="active === 4" src="https://pro-wjy.oss-cn-beijing.aliyuncs.com/2024/10/31/9b602a990f2b4b03af964228be8d4fa8.png" alt="服务完成" class="step-image" />

    <van-field v-model="forma.listofserveId" label="添加服务地址" placeholder="请填写服务地址" required is-link readonly
               @click="onSelectServiceType"  />
    <van-field v-model="forma.listofDate" label="预约时间" placeholder="请填写预约时间" required is-link readonly
               @click="onSelectDateType" class="van-forma"/>
    <div class="van-bus">
      <span>出行方式 <van-tag type="success" class="around">公交</van-tag><van-tag plain type="primary" class="around1">滴滴</van-tag></span>
    </div>

    <van-cell-group class="van-text">
      <van-field v-model="value" label="备注" placeholder="请输入您要备注的信息" />
    </van-cell-group>

    <van-cell >
      <div slot="title">
        <div class="order-info">
          <img
              :src="ordersImg"
              alt="Service"
              class="service-image"
          />
          <span class="order-service">{{ orders.name }}</span><br>
          <span class="order-technician" style="font-size: 15px; color: #666666">技师：{{ orders.tname }}</span><br>
          <span class="order-duration"><van-icon name="clock-o" />{{ orders.minutes }}分钟</span>
          <span class="order-price2">¥{{ orders.price }}</span>
        </div>
      </div>
    </van-cell>

    <van-field v-model="forma.listofYou" label="优惠券" placeholder="" required is-link readonly
               @click="onSelectYouType" />

    <van-field label="车费"  readonly /><br>
    <van-field label="支付方式"  readonly /><br>
    <span class="van-total">合计：￥188</span>
    <h3>订单信息</h3>
    <van-field label="订单号" readonly >{{orders.orderid}}</van-field><br>
    <van-field label="下单时间" readonly >{{orders.orderid}}</van-field>

    <div class="van-but">
      <!-- 当active为0、1、2、3时显示这一组按钮 -->
      <div v-if="[0, 1, 2, 3].includes(active)">
        <van-button round class="van-order">取消订单</van-button>
        <van-button round type="primary">更换服务</van-button>
      </div>
      <!-- 当active为4时显示这一组按钮 -->
      <div v-else-if="active === 4">
        <van-button round class="van-order" v-show="false">取消订单</van-button>
        <van-button round type="primary" v-show="false">更换服务</van-button>
        <van-button round type="primary">继续服务</van-button>
      </div>
    </div>


  </div>
</template>

<script>
import OrderItem from './OrderItem.vue';
import { CountDown } from 'vant';
import { Toast } from 'vant';
import axios from "axios";

export default {
  components: {
    [CountDown.name]: CountDown,
    OrderItem
  },
  props: ['order'],
  data() {
    return {
      active:1,
      orders:{},
      time: 1000 * 60 * 30, // 30分钟
      forma: {

        listofDate: '',
        listofYou:''
      },
      value: '',
      ordersImg: 'https://pro-wjy.oss-cn-beijing.aliyuncs.com/2024/10/31/9b602a990f2b4b03af964228be8d4fa8.png',
      // 其他数据...
    };
  },
  methods: {
    handleStepClick(index) {
      this.active = index;
    },
    onSelectServiceType() {
      this.$router.push('/address');
    },
    onSelectDateType() {
      this.$router.push('/selectTime');
    },
    onSelectYouType(){
      this.$router.push('/youhuijuan');
    },
    findAll(orderId) {
      axios.get(`http://localhost:10086/particulars/findById/${orderId}`).then(res => {
        this.orders = res.data[0];
        console.log(res.data[0])
      });
    }
  },
  created() {
    this.forma.listofDate = sessionStorage.getItem("createTime")
    let addressString = sessionStorage.getItem("address");
    if (addressString) {
      let address = JSON.parse(addressString);
      let one = address.contactName;
      let two = address.contactPhone;
      let three = address.detailAddress;
      // 显示订单信息
      this.forma.listofserveId = one+" "+two+" "+three;
    }
    // this.forma.listofserveId=sessionStorage.getItem("fwname")
    const orderId = this.$route.query.orderId;
    console.log(orderId);
    if (orderId) {
      this.findAll(orderId);
    } else {
      console.error('未找到订单ID');
    }

  }
};
</script>

<style>
.van-cards {
  float: right;
  margin-top: 10px;
}
.payment-info{
  margin-top: 30px;
}
.around {
  width: 40px;
  height: 35px;
  float: right;
  margin-left: 10px;
  text-align: center;
}
.around1 {
  width: 40px;
  height: 35px;
  float: right;
}
.van-text {
  margin-top: 15px;
}
.service-image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  float: left;
}
.van-total{
  color: red;
  float: right;
  font-size: 25px;
}
.van-but{
  float: right;
  margin-top: 10px;
}
.van-order{
  margin-right: 15px;
}
.van-forma{
  margin-top: 10px;
}
.van-bus{
  margin-top: 10px;
  margin-left: 6px;
}
.step-image{
  width: 80px;
  height: 80px;
}
.order-price2 {
  float: right;
  font-size: 20px;
  color: red;
}

</style>

